<template>
  <div>
    <!-- 车辆详情 -->
    <el-drawer
      v-if="visible"
      :visible.sync="visible"
      :with-header="false"
      direction="rtl"
    >
      <div class="title">
        <div class="title-left">
          <div class="title-text">{{ temp.truckCode }}</div>
          <el-tag class="tag">{{ temp.truckType && formatColumnMap(truckTypeList, 'value', temp.truckType, 'desc') }}</el-tag>
          <el-tag class="tag">{{ temp.truckStatus === 1 ? '启用' : '禁用' }}</el-tag>
        </div>
        <div><span class="el-icon-close close-btn" @click="reset" /></div>
      </div>
      <div class="popups-info">
        <div class="form">
          <el-collapse v-model="activeNames" class="collapse">
            <el-collapse-item title="基本信息" name="1">
              <div class="block">
                <el-descriptions size="medium" :label-style="labelStyle" :content-style="contentStyle">
                  <el-descriptions-item label="车牌号">{{ temp.truckCode }}</el-descriptions-item>
                  <el-descriptions-item label="车辆编号">{{ temp.truckNum }}</el-descriptions-item>
                  <el-descriptions-item label="所属机构">{{ temp.orgName }}</el-descriptions-item>
                  <el-descriptions-item label="车辆类型">{{ temp.truckType && formatColumnMap(truckTypeList, 'value', temp.truckType, 'desc') }}</el-descriptions-item>
                  <el-descriptions-item label="生产厂家">{{ temp.manufacturer }}</el-descriptions-item>
                  <el-descriptions-item label="责任归属">{{ temp.revertBelong && formatColumnMap(revertBelongList, 'keyVal', temp.revertBelong, 'keyName') }}</el-descriptions-item>
                  <el-descriptions-item label="车辆属性">{{ temp.attributes && formatColumnMap(attributesList, 'value', temp.attributes, 'desc') }}</el-descriptions-item>
                  <el-descriptions-item label="载荷">{{ temp.loadNum }}</el-descriptions-item>
                  <el-descriptions-item label="车辆状态">{{ temp.truckStatus === 1 ? '启用' : '禁用' }}</el-descriptions-item>
                  <el-descriptions-item label="车辆GPS">{{ temp.gpsInstall === 1 ? '已安装' : '未安装' }}</el-descriptions-item>
                  <el-descriptions-item label="车载视频">
                    <span v-if="temp.videoInstallList === 1" class="link-text" @click="showVideo">{{ temp.videoInstallList === 1 ? '已安装' : '未安装' }}</span>
                    <span v-else>{{ temp.videoInstallList === 1 ? '已安装' : '未安装' }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item label="随车司机">{{ temp.driver }}</el-descriptions-item>
                  <el-descriptions-item label="随车押运员">{{ temp.escortName }}</el-descriptions-item>
                  <el-descriptions-item label="备注" :span="2"><span class="remark-desc">{{ temp.remark }}</span></el-descriptions-item>
                  <el-descriptions-item label="二维码">
                    <el-image
                      v-if="temp.qrCodeUrl"
                      style="width: 100px; height: 100px;"
                      :src="temp.qrCodeUrl"
                      :preview-src-list="[temp.qrCodeUrl]"
                    />
                  </el-descriptions-item>
                </el-descriptions>
                <div class="image-block">
                  <el-image v-if="temp.photo" :src="temp.photo" />
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item title="配送信息" name="2">
              <vehicleMap :truck-code="temp.truckCode" :driver-id="temp.driverId" />
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </el-drawer>
    <vehicleVideo ref="vehicleVideo" />
  </div>
</template>

<script>
  import { formatColumnMap, parseTime } from '@/utils'
  import { imgBaseUrl } from '@/utils/config'
  import vehicleVideo from './vehicleVideo.vue'
  import vehicleMap from './vehicleMap.vue'
  export default {
    name: 'vehicleDetail',
    components: {
      vehicleVideo, vehicleMap
    },
    props: {
      revertBelongList: {
        type: Array,
        require: true
      }
    },
    data() {
      return {
        parseTime: parseTime,
        activeNames: ['1', '2'],
        imgBaseUrl,
        visible: false,
        temp: {},
        labelStyle: { 'white-space': 'nowrap' },
        contentStyle: { 'word-break': 'break-all' },
        truckTypeList: [
          {
            value: 1,
            desc: '三轮车'
          },
          {
            value: 2,
            desc: '两轮车'
          },
          {
            value: 3,
            desc: '危化品运输车'
          }
        ],
        attributesList: [
          {
            value: 1,
            desc: '燃油车'
          },
          {
            value: 2,
            desc: '电动车'
          }
        ]
      }
    },
    created() {

    },
    methods: {
      formatColumnMap,
      async open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.temp = { ...temp }
          this.visible = true
        })
      },
      showVideo() {
        this.$refs.vehicleVideo.open()
      },
      // 关闭
      reset() {
        this.visible = false
        this.infoTy = 'info'
        this.check_field = false
        this.returned_field = false
      }
    }
  }
</script>

<style lang="scss" scoped>
/deep/.el-drawer {
  width: 80% !important;
}
/deep/.el-collapse-item__header {
  font-size: 16px;
  color: #38BDBD;
}
.title {
  position: fixed;
  display: flex;
  justify-content: space-between;
  width: 80%;
  padding: 20px 20px 20px 20px;
  background-color: white;
  .title-left {
    display: flex;
    .title-text {
      line-height: 25px;
    }
    .tag {
      margin: 0 10px;
    }
  }
  .close-btn {
    font-size: 20px;
    cursor: pointer;
  }
}
.popups-info {
  padding: 0 30px;
  margin-top: 70px;
  .form {
    .block {
      display: flex;
      justify-content: space-between;
      width: 100%;
      /deep/.el-descriptions {
        width: 70%;
        // .remark-desc {
        //   overflow: auto !important;
        // }
      }
      /deep/ .el-collapse-item__content {
        padding-bottom: 10px;
      }
      /deep/ .el-collapse-item__header {
        font-size: 14px;
        font-weight: 700;
        color: #38BDBD;
      }
      .image-block {
        width: 30%;
        height: 180px;
        margin-left: 10px;
        .el-image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .link-text {
    color: #38BDBD;
    cursor: pointer;
  }
}
</style>
